今天的路線比較專業一點 (自己講)
下面的介紹算是我自己的實務經驗結合官網說明
所整理出來的筆記

對於第一次接觸 Sass / SCSS 的捧油們
這篇算是基礎的重點整理，給予大家一個方向前進
細部的部分還是需要自行尋找資源學習唷~

希望對各位捧油能有所幫助
接下來，我們就要踏上前端設計師的 轉生 轉職旅程啦!

Sass / SCSS 簡介與特色

Sass

是眾多優秀的CSS預處理器語言其中之一。
採用 縮排式的寫法

SCSS

是由 Sass 發展出兼容 CSS 的新語法。
其語法中新增了大括號及分號，類 CSS 寫法

而阿宅 PO 目前都是使用 SCSS 在開發和管理樣式

特色

1. 簡潔、富語意、重複性佳、可維護性佳和可延展性佳的 CSS 程式碼。
2. 變數（Variables）、函式（Function）、嵌套（Nesting）、混入（Mixins）和繼承/共用（Extends）
3. 都需要透過編譯器編譯成CSS，才能在瀏覽器上運行。

Sass 5 大基礎

變數（Variables）

• 使用 $ 來表示變數 ( ex：$color_primary )
• 變數的資料型態： Numbers、Strings、null 值、Booleans、Lists、Maps
• 儲存重複使用的值可以增加重用性
• 實作上會集中所有變數，集成一份 變數表
• 使用 @import 匯入樣式
• 順序上需要放在所有樣式的最上方 "第一個"

巢狀/嵌套（Nesting）

• 降低父元素重複性
• 類似 DOM 元素的階層關係
• 方便維護以及樣式模組化
• 巢狀/嵌套 請勿超過 3 層

1. HTML 架構

<ul class="list_className">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

2. SCSS 編譯前

.list_className {
  color: #666;
  font-size: 0;
  font-weight: 700;
  list-style: none;
  padding: 0;
  margin: 0;
  
  li {
    display: inline-block;
    font-size: 16px;
    
    a {
      color: #999;
      
      &:hover, &:focus {
        color: #ccc;
      }
    }
  }
}

3. SCSS 編譯後

.list_className {
  color: #666;
  font-size: 0;
  font-weight: 700;
  list-style: none;
  padding: 0;
  margin: 0;
}
.list_className li {
  display: inline-block;
  font-size: 16px;
}
.list_className li a {
  color: #999;
}
.list_className li a:hover, .list_className li a:focus {
  color: #ccc;
}

混入（Mixins）

• 可以客製化常用的單一/整組的 CSS 屬性。
• 類似 JS 封裝成一個類別，來重複使用某一組CSS 屬性。
• 可拉出需要因應畫面而變動的屬性值，拉出的屬性值也可設定預設值。
• 可以多組引用
• 使用時，使用 @include 方式引入

1. 先定義 一個 Mixins ( @mixin )
   @mixin name( param1, param2, ... )

@mixin bg-radient-image($direction, $color1, $color2) {
  background-image: linear-gradient($direction, $color1 0, $color2 100%);
}

@mixin bg-setting($bgposition:center center,$bgsize:cover) {
  background-repeat: no-repeat;
  background-position: $bgposition;
  background-size: $bgsize;
}

1. 在樣式 (class) 中引入
   @include name( argu1, argu2, ...);

.style_classNameA {
  @include bg-setting;
}

.style_classNameB {
  @include bg-radient-image(90deg, #f90, #FF0);
  @include bg-setting;
}

1. 編譯後

.style_classNameA {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.style_classNameB {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f90), to(#FF0));
  background-image: linear-gradient(90deg, #f90 0, #FF0 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

繼承/共用（Extends）

• 大多是針對單一專案進行客製的特定樣式
• 固定不會變的樣式片段
• 與 Mixins 相比，較沒有彈性
• 也可以放到 Mixins 內使用
• 使用時，使用 @extend 方式引入

1. 先定義 一個 Extend ( %extend )
   %name {}

%list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

1. 在樣式 (class) 中引入

.list_classNameA {
  color: #666;
  font-size: 0;
  font-weight: 700;
  @extend %list-reset;
  
  li {
    display: inline-block;
    font-size: 16px;
    
    a {
      color: #999;
      
      &:hover, &:focus {
        color: #ccc;
      }
    }
  }
}

.list_classNameB {
  color: #333;
  @extend %list-reset;
  
  li {
    font-size: 22px;
  }
}

1. 編譯後

.list_classNameA, .list_classNameB {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_classNameA {
  color: #666;
  font-size: 0;
  font-weight: 700;
}
.list_classNameA li {
  display: inline-block;
  font-size: 16px;
}
.list_classNameA li a {
  color: #999;
}
.list_classNameA li a:hover, .list_classNameA li a:focus {
  color: #ccc;
}

.list_classNameB {
  color: #333;
}
.list_classNameB li {
  font-size: 22px;
}

函式（Function）

• 建立時，使用 @function 宣告
• 與 @return 搭配使用，會回傳一個值
• 使用時，不需要搭配 @ 符號

1. 編譯前

@function test-return($n) {
  @return $n;
}

.title_bigText {
  color: #999;
  font-size: test-return(123) * 1px;
}

1. 編譯後

.title_bigText {
  color: #999;
  font-size: 123px;
}

Reference

1. Sass 官網
2. 阿宅 PO 的自學筆記